import { defineComponent, h, ref } from 'vue';
import { ElForm } from 'element-plus';
import { definePlugin } from '@/components/@comp/create-component';

// console.log(ElForm);

const FormLayout = defineComponent({
  // inheritAttrs: false,
  props: ['instance', 'form', 'column', 'columns', 'gap', 'border', 'model'],
  emits: ['update:modelValue'],
  setup({ instance, model }, { slots }) {
    // console.log('attrs::', model);
    return () => {
      return h(
        ElForm,
        {
          ref: instance.collection.form,
          model: model,
          // onChange: (field, value) => {
          //   console.log('form-value::', field, value);
          //   // emit('update:modelValue', { ...props.modelValue, [field]: value });
          // },
        },
        {
          default: () => [slots.content?.()],
        },
      );
    };
  },
});

const FormView = definePlugin({
  name: 'FormView',
  priority: 'Layout',
  expose: [{ name: 'formInstance', source: 'formInstance' }],
  elementKeys: ['content'],
  collection() {
    return {
      layout: FormLayout,
      content: [],
      form: null,
    };
  },
  props: { form: null, model: Object },
  main(_, props) {
    const { form } = props;
    const formRef = ref(form || null);

    return { form: formRef };
  },
});

export default FormView;
